<!-- Note that this element is fixed to avoid flakiness if the page has been scrolled down. -->
<div class="click-test" (click)="onClick($event)" (contextmenu)="onRightClick($event)"
     style="width: 100px; height: 100px; background: grey; position: fixed; top: 0; right: 0; z-index: 10;"
     #clickTestElement>
</div>
<div class="click-test-result">{{clickResult.x}}-{{clickResult.y}}</div>
<div class="contextmenu-test-result">{{rightClickResult.x}}-{{rightClickResult.y}}-{{rightClickResult.button}}</div>
<div class="click-modifiers-test-result">{{modifiers}}</div>
<h1 style="height: 100px; width: 200px;">Main Component</h1>
<div id="username">Hello {{username}} from Angular 2!</div>
<div class="counters">
  <button (click)="click()" id="up-button">Up</button><br>
  <label>Count:</label>
  <div id="counter">{{counter}}</div>
  <label>AsyncCounter:</label>
  <div id="asyncCounter">{{asyncCounter}}</div>
</div>
<span id="contenteditable" contenteditable>initial value</span>
<div class="inputs">
  <input [(ngModel)]="input" id="input" aria-label="input" (keydown)="onKeyDown($event)">
  <span class="special-key">{{specialKey}}</span>
  <div id="value">Input: {{input}}</div>
  <textarea id="memo" aria-label="memo">{{memo}}</textarea>
  <select
    id="single-select"
    aria-label="single select"
    [(ngModel)]="singleSelect"
    (change)="singleSelectChangeEventCount = singleSelectChangeEventCount + 1">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <div id="single-select-value">Select: {{singleSelect}}</div>
  <div id="single-select-change-counter">Change events: {{singleSelectChangeEventCount}}</div>

  <select
    multiple
    id="multi-select"
    aria-label="multi select"
    [(ngModel)]="multiSelect"
    (change)="multiSelectChangeEventCount = multiSelectChangeEventCount + 1">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <div id="multi-select-value">Multi-select: {{multiSelect}}</div>
  <div id="multi-select-change-counter">Change events: {{multiSelectChangeEventCount}}</div>
  <div (myCustomEvent)="basicEvent = basicEvent + 1" id="custom-event-basic">Basic event: {{basicEvent}}</div>
  <div (myCustomEvent)="onCustomEvent($event)" id="custom-event-object">Event with object: {{customEventData}}</div>

  <input id="number-input" type="number" aria-label="Enter a number" [formControl]="numberControl">
  <div id="number-input-value">Number value: {{numberControl.value}}</div>
</div>
<div class="subcomponents">
  <test-sub class="test-special" title="test tools" [items]="testTools"></test-sub>
  <test-sub title="test methods" [items]="testMethods"></test-sub>
</div>
<div class="other">
  <test-sub title="other 1"></test-sub>
  <test-sub title="other 2"></test-sub>
</div>
<div class="parent">
  <div class="some-div">Div inside parent</div>
  <div class="some-span">Span inside parent</div>
</div>
<div class="some-div">Div outside parent</div>
<div class="some-span">Span outside parent</div>
<div class="quoted-comma-parent">
  <div has-comma="a,b">Has comma inside attribute</div>
</div>
<div class="task-state-tests">
  <button (click)="runTaskOutsideZone()" id="task-state-test-trigger">
    Run task outside zone
  </button>
  <span id="task-state-result" #taskStateResult></span>
</div>
@if (_shadowDomSupported) {
  <test-shadow-boundary></test-shadow-boundary>
}


<div
  id="hover-box"
  [class.hovering]="isHovering"
  [class.pointer-over]="isPointerOver"
  (mouseenter)="isHovering = true"
  (mouseleave)="isHovering = false"
  (mouseover)="isPointerOver = true"
  (mouseout)="isPointerOver = false"
  style="width: 50px; height: 50px; background: hotpink;"></div>
<div class="hidden-element" style="display: none;">Hello</div>
